<!DOCTYPE html>
<html lang="zh-CN"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content=" echarts3.x 数据、样式配置分离，jquery组件">
    <meta name="author" content="">

    <title>

        mmecharts 文档

    </title>

    <!-- Bootstrap core CSS -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/docs.css" rel="stylesheet">
    <link href="css/prettify.css" rel="stylesheet">
    <!-- Optional Bootstrap Theme -->
    <link href="data:text/css;charset=utf-8," data-href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body onload="prettyPrint()">

<!-- Docs page layout -->
<div class="docs-header" id="content" tabindex="-1">
    <div class="container">
        <h1>mmecharts</h1>
        <p>echarts3.x 数据、样式配置分离方案</p>
    </div>
</div>

<div class="container">

    <div class="row">
        <div class="col-md-9" role="main">
            <div class="docs-section">

                <h2 id="js-h-over">概述</h2>
                <p>
                    echarts3.x 数据、样式配置分离，jquery组件
                </p>

                <p>
                    1、同一份数据用在不同图表类型
                    <br/>
                    2、自动解析不同数据结构
                    <br/>
                    3、只修改需要修改的配置
                </p>


                <h2 id="js-h-user">用法</h2>
                <p>
                    导入<code>jquery.js</code>和<code>mm.echarts.js</code>和<code>echarts.js</code>                
                </p>
                <div class="highlight">
                    <pre class="prettyprint"><code class="language-js" data-lang="js">
                        $(function () {<br/>
                        	$(selector).mmEcharts(options);
                         <br/>
                        });
                    </code></pre>
                </div>
                <h3 id="js-ctx-options">Options</h3>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>标签</th>
                            <th>类型</th>
                            <th>默认</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>chartType</td>
                            <td>data-chart-type</td>
                            <td>string</td>
                            <td>line</td>
                            <td>图表类型;line:折线图,bar:柱状图,bar2:x轴和y轴调换的柱状图,pie:饼状图,map:地图</td>
                        </tr>
                        <tr>
                            <td>queryUrl</td>
                            <td>data-query-url</td>
                            <td>string</td>
                            <td>undefined</td>
                            <td>请求后台数据URL</td>
                        </tr>
                        <tr>
                            <td>queryParams</td>
                            <td>data-query-params</td>
                            <td>object</td>
                            <td>undefined</td>
                            <td>请求后台参数</td>
                        </tr>
                        <tr>
                            <td>ajax</td>
                            <td>不支持</td>
                            <td>object</td>
                            <td>undefined</td>
                            <td>ajax请求配置</td>
                        </tr>
                        <tr>
                            <td>dataType</td>
                            <td>data-data-type</td>
                            <td>string</td>
                            <td>row</td>
                            <td>请求后台返回数据类型，row或者column</td>
                        </tr>
                        <tr>
                            <td>chartTheme</td>
                            <td>data-chart-theme</td>
                            <td>string</td>
                            <td>walden</td>
                            <td>图表主题</td>
                        </tr>
                        <tr>
                            <td>chartOptions</td>
                            <td>data-chart-options</td>
                            <td>object</td>
                            <td>undefined</td>
                            <td>图表配置，可以只设置修改部分，会和默认配置合并</td>
                        </tr>
                        <tr>
                            <td>groupField</td>
                            <td>data-group-field</td>
                            <td>string</td>
                            <td>name</td>
                            <td>数据解码，分组字段</td>
                        </tr>
                        <tr>
                            <td>valueFields</td>
                            <td>data-value-fields</td>
                            <td>object</td>
                            <td>undefined</td>
                            <td>数据解码，值字段,如,显示两条线:valueFields:{'dayValue':'日活完成量','monthTarget':'日活目标按月分解'}</td>
                        </tr>

                        <tr>
                            <td>categoryField</td>
                            <td>data-category-field</td>
                            <td>string</td>
                            <td>name</td>
                            <td>类目字段，从行数据中获取，则需要配置该字段，如果设置categoryField则不需要设置valueFields</td>
                        </tr>
                        <tr>
                            <td>categoryValueField</td>
                            <td>data-category-value-field</td>
                            <td>string</td>
                            <td>name</td>
                            <td>如果出现categoryField字段，必须要有categoryValueField字段</td>
                        </tr>

                        <tr>
                            <td>dataset</td>
                            <td>不支持</td>
                            <td>object</td>
                            <td>undefined</td>
                            <td>设置图表数据</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="js-event">事件</h3>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>标签</th>
                            <th>参数</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>on</td>
                            <td>不支持</td>
                            <td></td>
                            <td>事件配置,{on:{click:function(){},mouserover:function(){}；另外还支持事件：before：配置开始;renderBefore：后台数据已经返回开始渲染;complete:渲染完成</td>
                        </tr>
                        <tr>
                            <td>before</td>
                            <td>data-before</td>
                            <td>MMChart</td>
                            <td>配置开始</td>
                        </tr>
                        <tr>
                            <td>renderBefore</td>
                            <td>data-render-before</td>
                            <td>data, params, MMChart</td>
                            <td>后台数据已经返回开始渲染</td>
                        </tr>
                        <tr>
                            <td>complete</td>
                            <td>data-complete</td>
                            <td>MMChart</td>
                            <td>渲染完成</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <h3 id="js-mmechart-function">MMChart方法</h3>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>参数</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>loadDataByUrl</td>
                            <td>url, params, dataType, defaultOptions, callback</td>
                            <td>通过URL加装数据</td>
                        </tr>
                        <tr>
                            <td>addChartBySql</td>
                            <td>options, chartType, yAixs, sql, params, dataType, callback</td>
                            <td>添加混合图形</td>
                        </tr>
                        <tr>
                            <td>addChartByData</td>
                            <td>options, chartType, yAixs, data, dataType, callback</td>
                            <td>添加混合图形</td>
                        </tr>
                        <tr>
                            <td>echarts</td>
                            <td>none</td>
                            <td>获得echarts对象</td>
                        </tr>
                        <tr>
                            <td>setOptions</td>
                            <td>options</td>
                            <td>设置MMChart配置</td>
                        </tr>
                        <tr>
                            <td>getOptions</td>
                            <td>none</td>
                            <td>获取MMChart配置</td>
                        </tr>
                        <tr>
                            <td>setEchartsOptions</td>
                            <td>options</td>
                            <td>设置Echarts配置</td>
                        </tr>
                        <tr>
                            <td>getEchartsOptions</td>
                            <td>none</td>
                            <td>获取Echarts配置</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h3 id="js-chartType-function">ChartType方法</h3>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped js-options-table">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>参数</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>type</td>
                            <td>属性</td>
                            <td>图表类型</td>
                        </tr>
                        <tr>
                            <td>option</td>
                            <td>defaultOption</td>
                            <td>图表默认配置</td>
                        </tr>
                        <tr>
                            <td>decodeData</td>
                            <td>data,MMEchart</td>
                            <td>解码数据</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <h2 id="js-h-demo">例子</h2>
                <p><a target="_blank" href="../examples/all.html">all</a></p>
                <p><a target="_blank" href="../examples/line.html"> line</a></p>
                <p><a target="_blank" href="../examples/map.html"> map</a></p>
                <p><a target="_blank" href="../examples/pie.html">pie</a></p>
                <p><a target="_blank" href="../examples/mixedChart.html">混合图形例子</a></p>
                <p><a target="_blank" href="../examples/radar.html">自定义扩展图表例子</a></p>
            </div>
        </div>

        <div class="col-md-3" role="complementary">
            <nav class="docs-sidebar hidden-print hidden-xs hidden-sm affix">
                <ul class="nav docs-sidenav">

                    <li>
                        <a href="#js-h-over">概述</a>
                    </li>
                    <li>
                        <a href="#js-h-user">用法</a>
                    </li>
                    <li>
                        <a href="#js-ctx-options">options</a>
                    </li>
                    <li>
                        <a href="#js-event">事件</a>
                    </li>
                    <li>
                        <a href="#js-mmechart-function">MMChart方法</a>
                    </li>
                    <li>
                        <a href="#js-chartType-function">ChartType方法</a>
                    </li>

                    <li>
                        <a href="#js-h-demo">例子</a>
                    </li>


                </ul>
                <a class="back-to-top" href="#top">
                    返回顶部
                </a>


            </nav>
        </div>

    </div>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script src="js/prettify.js"></script>
